<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="transfer">
      <view class="price">￥{{ orderInfo.paid_amount }}</view>
      <view class="orderNum">订单号：{{ orderInfo.order_id }}</view>
      <view class="days">请在
        <u-count-down
          :time="orderInfo.surplusTime"
          format="DD:HH:mm:ss"
          auto-start
          millisecond
          @change="onChange"
        >
          <view class="time">
            <text class="time__item">{{ timeData.days }}天</text>
            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours }}小时</text>
            <text class="time__item">{{ timeData.minutes }}分钟</text>
          </view>
        </u-count-down>内完成转账汇款
      </view>
      <view class="line" />
      <view class="payInfo" style="color: #999999;margin-top: 38rpx;">
        <text>汇款信息</text> <text />
      </view>
      <view v-for="(item, index) in infoList" :key="index" class="payInfo">
        <text>{{ item.label }}</text><text>{{ bankInfo[item.key] }}</text>
      </view>
      <view class="tips">
        <text style="margin-bottom: 24rpx;">注意事项</text>
        <text>1、下单后请尽快转账至页面展示收款账户，务必保证转账金额与订单金额一致，请勿多转、少转和分次转账，否则影响订单对账进度；</text>
        <text>2、转账时请将支付流水号填写至“用途/备注/摘要栏”，便于快速核销款项。</text>
      </view>
      <view class="footer">
        <view class="button" @click="$u.throttle(confrimTrans, 1000)">确认</view>
      </view>
    </view>
  </basePage>
</template>

<script>
import { getBankInfo, savePayInfo, instantConfirm } from '@/api/orderApi';
import basePage from '@/components/base-page';
import {prePayMethod} from '@/payments/payMethod'
export default {
  components: {
    basePage
  },
  data() {
    return {
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      type: 'confrim',
      infoList: [
        { label: '户名', key: 'accountName' },
        { label: '账号', key: 'accountNumber' },
        { label: '开户行', key: 'bankName' },
        { label: '联行号', key: 'lineNumber' },
        { label: '支付流水号', key: 'order_id' },
      ],
      timeData: {},
      orderInfo: {},
      bankInfo: {},
      payId: '',
      prePayInfo: {}, // prePay预支付接口返回参数信息
    }
  },
  onLoad(option) {
    this.orderInfo = JSON.parse(option.params)
    const { surplusTime = '' } = JSON.parse(option.params)
    if (!surplusTime) this.orderInfo.surplusTime = 5 * 24 * 60 * 60 * 1000
    this.getBankInfo()
    this.savePayInfo()
  },
  methods: {
      prePayMethod,
    async savePayInfo() {
      // const { memberId } = this.vuex_memberInfo
      // const params = {
      //   orderIds: this.orderInfo.order_id,
      //   memberId,
      //   payType: '10', // 10下单，20结算
      //   totalAmount: this.orderInfo.paid_amount,
      //   accountFlag: false
      // }
      // const res = await savePayInfo(params)
      // if (res.errorCode == 0) {
      //   this.payId = res.data.payId
      // }
      const { paid_amount, order_id } = this.orderInfo
      const prePayParams = { platform: 'YC', orderId: order_id, totalAmount: paid_amount }
      this.prePayInfo = await this.prePayMethod(prePayParams).catch((e) => {
        this.$u.toast(e.message)
      })
      console.log(this.prePayInfo);
    },
    onChange(e) {
      this.timeData = e
    },
    async getBankInfo() {
      const { memberId } = this.vuex_memberInfo
      const params = {
        orderId: this.orderInfo.order_id,
        member_id: memberId
      }
      const res = await getBankInfo(params)
      if (res.code == '0') {
        this.bankInfo = { ...res, order_id: this.orderInfo.order_id }
      }
    },
    async confrimTrans() {
      const { memberId, loginAccount } = this.vuex_memberInfo
      const {
        payId
      } = this.prePayInfo
      const params = {
        order_id: this.orderInfo.order_id,
        member_id: memberId,
        paid_id: payId,
        login_account: loginAccount
      }
      const res = await instantConfirm(params)
      if (res.code == 0) {
        uni.navigateTo({
          url: `/payments/paySuccess/index?type=confrim&order_id=${this.orderInfo.order_id}&timeNum=${this.orderInfo.surplusTime}`
        })
      }
    },
  }
}
</script>

<style>
page {
  background: #FFFFFF;
}
</style>

<style scoped lang="scss">
.line {
  width: 100%;
  height: 1rpx;
  background: #F5F5F5;
  margin-top: 32rpx;
}
.transfer{
  padding: 32rpx;
  box-sizing: border-box;
  background: #FFFFFF;
  padding-top: 26rpx;
  .tips {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    text-align: left;
    margin-top: 46rpx;
    text {
      display: block;
      line-height: 40rpx;
    }
  }
  .price {
    color: #FF5533;
    font-size: 64rpx;
    font-weight: 700;
    text-align: center;
    margin-top: 8rpx;
  }
  .orderNum {
    color: #222222;
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    margin-top: 8rpx;
  }
  .days {
    color: #222222;
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    margin-top: 8rpx;
    display: flex;
    justify-content: center;
    .time {
      color: #FF5533;
    }
  }
  .payInfo {
    border-bottom: 1rpx solid #F5F5F5;
    padding: 30rpx 0rpx;
    color: #222222;
    font-size: 24rpx;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
  }
  .footer {
    display: flex;
    position: fixed;
    bottom: 90rpx;
    left: 0;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 100%;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    .button {
      width: 624rpx;
      height: 64rpx;
      border-radius: 8rpx;
      background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
      font-size: 28rpx;
      color: #FFFFFF;
      font-weight: 400;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
  }
}
</style>
